<template>
  <div ref="clockWrap" class="clock-wrap" :style="clockWrapStyle">
    <div v-show="!!customText" ref="clockText" class="item" :style="textStyle">{{ customText }}</div>
    <div v-show="showDate" ref="dateText" class="item" :style="dateStyle">{{ date }}</div>
    <div v-show="showLunar" ref="lunarText" class="item" :style="lunarStyle">{{ lunar }}</div>
    <template v-if="weekTimeSwap">
      <div v-show="showWeek" ref="weekText" class="item" :style="weekStyle">{{ week }}</div>
      <div v-show="showTime" ref="digitsText" class="item" :style="digitsStyle">{{ time }}</div>
    </template>
    <template v-else>
      <div v-show="showTime" ref="digitsText" class="item" :style="digitsStyle">{{ time }}</div>
      <div v-show="showWeek" ref="weekText" class="item" :style="weekStyle">{{ week }}</div>
    </template>
  </div>
</template>
<script>
import { filter, get } from 'lodash'
import { DATE_FORMAT, TEXT_ALIGN, TEXT_FLEX_ALIGN, TIME_FORMAT, WEEK_CH_MAP, WEEK_FORMAT } from '@/utils/constant'
import dayjs from 'dayjs'
import { PluginLunar } from 'dayjs-plugin-lunar'
import utc from 'dayjs-plugin-utc'

dayjs.extend(PluginLunar)
dayjs.extend(utc)

export default {
  name: 'DigitClock',
  props: {
    clockAttrs: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      date: '',
      lunar: '',
      time: '',
      week: '',
    }
  },
  computed: {
    customText() {
      return get(this.clockAttrs, 'text') || ''
    },
    clockWrapStyle() {
      const { boldSet, fontFamily, layout, backColor, dateFontSize, textAlign } = this.clockAttrs

      let backStyle = {
        display: layout ? 'flex' : 'block',
        'font-weight': boldSet ? 'bold' : 'inherit',
        'font-family': fontFamily,
        'font-size': `${dateFontSize}px`,
        'background-color': backColor ? (backColor === '#000000' ? '' : backColor) : '',
        height: '100%',
        'line-height': 'auto',
        'justify-content': 'center',
      }

      if (layout === 0) {
        Object.assign(backStyle, {
          'flex-direction': 'column',
        })
      } else {
        Object.assign(backStyle, {
          'flex-direction': 'inherit',
          'align-items': 'center',
          'justify-content': TEXT_FLEX_ALIGN[textAlign],
        })
      }

      return backStyle
    },
    textStyle() {
      return {
        ...this.itemStyle,
        color: this.clockAttrs.textColor,
      }
    },
    dateStyle() {
      const { dateColor } = this.clockAttrs
      return {
        ...this.itemStyle,
        color: dateColor,
      }
    },
    lunarStyle() {
      const { lunarColor } = this.clockAttrs
      return {
        ...this.itemStyle,
        color: lunarColor,
      }
    },
    digitsStyle() {
      const { timeColor } = this.clockAttrs
      return {
        ...this.itemStyle,
        color: timeColor,
      }
    },
    weekStyle() {
      const { weekColor } = this.clockAttrs
      return {
        ...this.itemStyle,
        color: weekColor,
      }
    },
    itemStyle() {
      const { dateShow, timeShow, weekShow, lunarShow, height, layout, textAlign } = this.clockAttrs
      let lineNum = filter([dateShow, timeShow, weekShow, lunarShow], (item) => item === 0).length

      if (this.customText) {
        lineNum += 1
      }

      const textHeight = height / lineNum
      const backStyle = {
        margin: layout === 0 ? '0' : '0px 4px',
        height: `${textHeight}px`,
        'line-height': `${textHeight}px`,
        'text-align': TEXT_ALIGN[textAlign],
      }

      return backStyle
    },
    weekTimeSwap() {
      return this.clockAttrs.weekTimeSwap === 1
    },
    showDate() {
      const { dateShow } = this.clockAttrs
      return dateShow === 0
    },
    showWeek() {
      const { weekShow } = this.clockAttrs
      return weekShow === 0
    },
    showTime() {
      const { timeShow } = this.clockAttrs
      return timeShow === 0
    },
    showLunar() {
      const { lunarShow } = this.clockAttrs
      return lunarShow === 0
    },
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.time)
  },
  methods: {
    init() {
      const { dateFormat, weekFormat, timeFormat, timeZoneValue = 0 } = this.clockAttrs
      let nowDate = dayjs().utcOffset(Number(timeZoneValue))
      const week = nowDate.format(WEEK_FORMAT[weekFormat])

      this.date = nowDate.format(DATE_FORMAT[dateFormat])
      this.week = weekFormat === 0 ? WEEK_CH_MAP[week] : week
      this.lunar = nowDate.format('LMLD')
      this.time = nowDate.format(TIME_FORMAT[timeFormat])
      nowDate = null
      requestAnimationFrame(this.init)
    },
  },
}
</script>
<style scoped lang="scss">
.clock-wrap {
  .item {
    white-space: nowrap;
  }
}
</style>
